<html><head><meta charset="utf-8"><title>逐条来看tsconfig.json配置-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 5-1 逐条来看tsconfig.json配置
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                逐条来看tsconfig.json配置
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-18 11:59:44
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img4.mukewang.com/5d2fe110000178f306400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">天才就是长期劳动的结果。<p class="author">——牛顿</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小结我们主要讲 tsconfig.json 文件的可配项以及功能。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">tsconfig.json 是放在项目根目录，用来配置一些编译选项等。当我们使用 tsc 命令编译项目，且没有指定输入文件时，编译器就会去查找 tsconfig.json 文件。如果在当前目录没找到，就会逐级向父文件夹查找。我们也可以通过在 tsc 命令中加上–project 参数，来指定一个包含 tsconfig.json 文件的目录。如果命令行上指定了输入文件时，tsconfig.json 的配置会被忽略。</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell"># 直接在项目根目录下执行tsc命令，会自动根据tsconfig.json配置项编译
tsc
# 指定要编译的项目，即tsconfig.json所在文件目录
tsc --project ./dir/project
# 指定要编译的文件，忽略tsconfig.json文件配置
tsc ./src/main.ts
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">接下来我们看一下 tsconfig.json 里都有哪些可配置项。tsconfig.json 文件里有几个主要的配置项：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
  <span class="token string">"compileOnSave"</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token string">"files"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">"include"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">"exclude"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">"extends"</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
  <span class="token string">"compilerOptions"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们来逐个学习它们的作用，以及可配置的值：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">[1] <code>compileOnSave</code></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">compileOnSave 的值是 true 或 false。如果设为 true，在我们编辑了项目中文件保存的时候，编辑器会根据 tsconfig.json 的配置重新生成文件，不过这个要编辑器支持。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">[2] <code>files</code></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">files 可以配置一个数组列表，里面包含指定文件的相对或绝对路径。编译器在编译的时候只会编译包含在 files 中列出的文件。如果不指定，则取决于有没有设置 include 选项；如果没有 include 选项，则默认会编译根目录以及所有子目录中的文件。这里列出的路径必须是指定文件，而不是某个文件夹，而且不能使用<code>*</code>、<code>?</code>、<code>**/</code>等通配符。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">[3] <code>include</code></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">include 也可以指定要编译的路径列表，但和 files 的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径，而且可以使用通配符。比如<code>"./src"</code>即表示要编译 src 文件夹下的所有文件以及子文件夹的文件。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">[4] <code>exclude</code></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">exclude 表示要排除的、不编译的文件，它也可以指定一个列表，规则和 include 一样，可以是文件可以是文件夹，可以是相对路径或绝对路径，可以使用通配符。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">[5] <code>extends</code></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">extends 可以通过指定一个其它的 tsconfig.json 文件路径，来继承这个配置文件里的配置，继承来的文件配置会覆盖当前文件定义的配置。TS 在 3.2 版本开始，支持继承一个来自 Node.js 包的 tsconfig.json 配置文件。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">[6] <code>compilerOptions</code></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后要讲的这个 compilerOptions 是重点了，它用来设置编译选项。因为它包含很多的可配置项，下面我们来看下 compilerOptions 里的所有可配项：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们先来看第一类，一些比较基本的配置：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">target</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">target 用于指定编译之后的版本目标，可选值有：<code>ES3(默认值)</code>、<code>ES5</code>、<code>ES2015</code>、<code>ES2016</code>、<code>ES2017</code>、<code>ESNEXT</code>。如果不配置 target 项，默认是讲代码转译为 ES3 的版本，如果设为 ESNEXT，则为最新 ES 规范版本。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">module</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">module 用来指定要使用的模块标准，可选值有<code>commonjs</code>、<code>amd</code>、<code>system</code>、<code>umd</code>、<code>es2015(或写 es6)</code>。如果不设置 module 选项，则如果 target 设为 ES6，那么 module 默认值为 ES6，否则是 commonjs。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">lib</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">lib 用于指定要包含在编译中的库文件。如果你要使用一些 ES6 的新语法，你需要引入 ES6 这个库，或者也可以写 ES2015。如果没有指定 lib 配置，默认会加载一些库，而加载什么库是受 target 影响的。如果 target 为 ES5，默认包含的库有<code>DOM</code>、<code>ES5</code>和<code>ScriptHost</code>；如果 target 是 ES6，默认引入的库有<code>DOM</code>、<code>ES6</code>、<code>DOM.Iterable</code>和<code>ScriptHost</code>。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">allowJs</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">allowJs 设置的值为 true 或 false，用来指定是否允许编译 JS 文件，默认是 false，即不编译 JS 文件。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">checkJs</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">checkJs 的值为 true 或 false，用来指定是否检查和报告 JS 文件中的错误，默认是 false。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">declaration</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">declaration 的值为 true 或 false，用来指定是否在编译的时候生成响应的".d.ts"声明文件。如果设为 true，编译每个 ts 文件之后会生成一个 js 文件和一个声明文件。但是 declaration 和 allowJs 不能同时设为 true。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">sourceMap</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">sourceMap 的值为 true 或 false，用来指定编译时是否生成.map 文件。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">outFile</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">outFile 用于指定将输出文件合并为一个文件，它的值为一个文件路径名，比如设置为<code>"./dist/main.js"</code>，则输出的文件为一个 main.js 文件。但是要注意，只有设置 module 的值为 amd 和 system 模块时才支持这个配置。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">outDir</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">outDir 用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">rootDir</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现 1 以 rootDir 的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，但是不会停止编译。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">removeComments</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">removeComments 值为 true 或 false，用于指定是否将编译后的文件中的注释删掉，设为 true 的话即删掉注释，默认为 false。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">noEmit</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">不生成编译文件，这个一般很少用了。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">importHelpers</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">importHelpers 的值为 true 或 false，指定是否引入 tslib 里的辅助工具函数，默认 Wie。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">isolatedModules</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">isolatedModules 的值为 true 或 false，指定是否将每个文件作为单独的模块，默认为 true，它不可以和 declaration 同时设定。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第二类是和严格类型检查相关的，开启了这些检查如果有错会报错：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">noImplicitAny</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">noImplicitAny 的值为 true 或 false，如果我们没有为一些值设置明确的类型，编译器会默认这个值为 any 类型，如果将 noImplicitAny 设为 true，则如果没有设置明确的类型会报错，默认值为 false。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">alwaysStrict</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">alwaysStrict 的值为 true 或 false，指定始终以严格模式检查每个模块，并且在编译之后的 JS 文件中加入"use strict"字符串，用来告诉浏览器该 JS 为严格模式。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">strictNullChecks</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">strictNullChecks 的值为 true 或 false，当设为 true 时，null 和 undefined 值不能赋值给非这两种类型的值，别的类型的值也不能赋给它们。 除了 any 类型，还有个例外就是 undefined 可以赋值给 void 类型。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">strictFunctionTypes</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">strictFunctionTypes 的值为 true 或 false，用来指定是否使用函数参数双向协变检查。还记得我们讲类型兼容性的时候讲过函数参数双向协变的这个例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> <span class="token function-variable function">funcA</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>arg<span class="token punctuation">:</span> <span class="token keyword">number</span> <span class="token operator">|</span> <span class="token keyword">string</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token function-variable function">funcB</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>arg<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
funcA <span class="token operator">=</span> funcB<span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果开启了 strictFunctionTypes，这个赋值就会报错，默认为 false</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">strictPropertyInitialization</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">strictPropertyInitialization 的值为 true 或 false，设为 true 后会检查类的非 undefined 属性是否已经在构造函数里初始化，如果要开启这项，需要同时开启 strictNullChecks，默认为 false。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">strictBindCallApply</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">strictBindCallApply 的值为 true 或 false，设为 true 后会对 bind、call 和 apply 绑定方法参数的检测是严格检测的，如下面的例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span>a<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">string</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> foo<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error Property '1' is missing in type '[number]' but required in type '[number, string]'</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> foo<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error 不能将类型“number”分配给类型“string”</span>
<span class="token keyword">let</span> ccd <span class="token operator">=</span> foo<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// right</span>
<span class="token keyword">let</span> ccsd <span class="token operator">=</span> foo<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// right</span>
</code></pre>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">strict</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">strict 的值为 true 或 false，用于指定是否启动所有类型检查，如果设为 true 则会同时开启前面这几个严格类型检查，默认为 false。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第三类为额外的一些检查，开启了这些检查如果有错会提示不会报错：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">noUnusedLocals</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">noUnusedLocals 的值为 true 或 false，用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用 ESLint 可以在你书写代码的时候做提示，你可以配合使用。它的默认值为 false。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">noUnusedParameters</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">noUnusedParameters 的值为 true 或 false，用于检查是否有在函数体中没有使用的参数，这个也可以配合 ESLint 来做检查，它默认是 false。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">noImplicitReturns</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">noImplicitReturns 的值为 true 或 false，用于检查函数是否有返回值，设为 true 后，如果函数没有返回值则会提示，默认为 false。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">noFallthroughCasesInSwitch</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">noFallthroughCasesInSwitch 的值为 true 或 false，用于检查 switch 中是否有 case 没有使用 break 跳出 switch，默认为 false。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">接下来是模块解析相关的：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">moduleResolution</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">moduleResolution 用于选择模块解析策略，有"node"和"classic"两种类型，我们在讲模块解析的时候已经讲过了。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">baseUrl</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">baseUrl 用于设置解析非相对模块名称的基本目录，这个我们在讲《模块和命名空间》的“模块解析配置项”一节时已经讲过了，相对模块不会受 baseUrl 的影响。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">paths</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">paths 用于设置模块名到基于 baseUrl 的路径映射，我们前面也讲过，比如这样配置：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
  <span class="token string">"compilerOptions"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token string">"baseUrl"</span><span class="token punctuation">:</span> <span class="token string">"."</span><span class="token punctuation">,</span> <span class="token comment">// 如果使用paths，必须设置baseUrl</span>
    <span class="token string">"paths"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">"jquery"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"node_modules/jquery/dist/jquery"</span><span class="token punctuation">]</span> <span class="token comment">// 此处映射是相对于"baseUrl"</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">还有当我们要为没有声明文件的第三方模块写声明文件时，我们可以先如下设置：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
  <span class="token string">"compilerOptions"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token string">"baseUrl"</span><span class="token punctuation">:</span> <span class="token string">"."</span><span class="token punctuation">,</span> <span class="token comment">// 如果使用paths，必须设置baseUrl</span>
    <span class="token string">"paths"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">"*"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"./node_modules/@types/*"</span><span class="token punctuation">,</span> <span class="token string">"./typings/*"</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后在 tsconfig.json 文件所在的目录里建一个 typings 文件夹，然后为要写声明文件的模块建一个同名文件夹，比如我们要为 make-dir 这个模块写声明文件，那么就在 typings 文件夹下新建一个文件夹，命名为 make-dir，然后在 make-dir 文件夹新建一个 index.d.ts 声明文件来为这个模块补充声明。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">rootDirs</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">rootDirs 可以指定一个路径列表，在构建时编译器会将这个路径列表中的路径内容都放到一个文件夹中，我们在前面也学习了。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">typeRoots</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">typeRoots 用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">types</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">types 用来指定需要包含的模块，只有在这里列出的模块声明文件才会被加载进来。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">allowSyntheticDefaultImports</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">allowSyntheticDefaultImports 的值为 true 或 false，用来指定允许从没有默认导出的模块中默认导入。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">接下来的是 source map 的一些配置项：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">sourceRoot</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">sourceRoot 用于指定调试器应该找到 TypeScript 文件而不是源文件位置，这个值会被写进.map 文件里。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">mapRoot</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">mapRoot 用于指定调试器找到映射文件而非生成文件的位置，指定 map 文件的根路径，该选项会影响.map 文件中的 sources 属性。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">inlineSourceMap</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">inlineSourceMap 值为 true 或 false，指定是否将 map 文件的内容和 js 文件编译在同一个 js 文件中。如果设为 true，则 map 的内容会以<code>//# sourceMappingURL=</code>然后接 base64 字符串的形式插入在 js 文件底部。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">inlineSources</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">inlineSources 的值是 true 或 false，用于指定是否进一步将.ts 文件的内容也包含到输出文件中。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后还有两个其他的配置项：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">experimentalDecorators</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">experimentalDecorators 的值是 true 或 false，用于指定是否启用实验性的装饰器特性，我们在讲装饰器的时候已经学习过了。</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">emitDecoratorMetadata</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">emitDecoratorMetadata 的值为 true 或 false，用于指定是否为装饰器提供元数据支持。关于元数据，也是 ES6 的新标准，可以通过 Reflect 提供的静态方法获取元数据，如果需要使用 Reflect 的一些方法，需要引入 ES2015.Reflect 这个库。</p>
</div><div class="cl-preview-section"><h3 id="本节小结">本节小结</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们逐条看了tsconfig.json文件里可以配置的项目，随着后面TypeScript的升级，可能配置项会比这里多，你可以参考官方文档的升级日志来查看更新。本小节我们学了六个顶级配置项：compileOnSave、files、include、exclude、extends和compilerOptions，其中我们最常用的是compilerOptions，用来配置编译选项。有一些参数是只能在tsconfig.json文件里配置的，而有一些则既可以在tsconfig.json文件配置，也可以在tsc命令行中指定，具体一个参数可以在哪里指定，可以参考<a href="https://www.tslang.cn/docs/handbook/compiler-options.html">编译选项列表</a>，这里有标注。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节我们来开始接触书写声明文件，学会了如何书写声明文件后，你就可以使用任何第三方插件、库或者框架进行开发了。<br>
<img src="http://img.mukewang.com/5d22b9c50001484612341600.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d22b9c50001484612341600.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/367">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    Promise及其语法糖async和await
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/369">
                                                    <div class="next r clearfix">
                                <p>
                                    书写声明文件之磨刀：识别库类型
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>